<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>三更海鲜夜宵外卖</title>
    <link rel="stylesheet" href="css/libs/weui.css">
    <link rel="stylesheet" href="css/libs/jquery-weui.min.css">
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/weui.js"></script>
    <script src="js/libs/jquery-weui.min.js"></script>
    <script src="js/libs/city-picker.min.js"></script>
    <script src="js/project.js"></script>
    <script src="js/libs/vue2.0.js"></script>

    <script type="text/javascript" src="js/libs/baidu/BMapLib.js?1"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=3tNmobyDXvMyo8xL8GTULduAoxWeAihe&coord=bd09ll"></script>
    <style>
        body, html {  width: 100%;  height: 100%;  }
        .weui_cells {  margin: 0;  }
        .weui_cells:before {  display: none;  }
        .weui_cell_hd {  font-size: 16px;  color: #333;  white-space: nowrap;  }
        .weui_cell_hd .weui_input {  text-indent: 10px;  }
        .weui_btn_warn {  background-color: #bb000e;  }
        .weui_input {  text-align: right;  }
    </style>
</head>
<body>

<div id="body" style="width: 100%;height: 100%;">
    <div v-show="!showMap">
        <header class="header">
            <span class="back"></span>
            <p class="title">请输入新地址</p>
        </header>
        <div style="height: 40px;"></div>

        <div class="weui_cells weui_cells_access">
            <div class="weui_cell">
                <div class="weui_cell_hd weui_cell_primary">所在城市</div>
                <div class="weui_cell_bd" v-text="form.city"></div>
            </div>
            <a href="page3.1baiduMap.html" class="weui_cell">
                <div class="weui_cell_hd weui_cell_primary">所在地址</div>
                <div class="weui_cell_ft" v-text="form.street"></div>
            </a>
            <div class="weui_cell">
                <div class="weui_cell_hd">详细地址</div>
                <div class="weui_cell_hd weui_cell_primary">
                    <input type="text" v-model="form.houseNumber" class="weui_input"
                           placeholder="请填写楼盘街道及门牌号"/>
                </div>
            </div>
        </div>

        <div class="weui_btn_area">
            <a @click="submit" class="weui_btn weui_btn_warn">保存并使用</a>
        </div>
    </div>

    <div id="allmap" v-show="showMap" style="width: 100%; height:100%;overflow:hidden;zoom:1;position:relative;">
        <header class="header">
            <span class="back noClick" @click="showMap = false"></span>
            <p class="title">请确认您的位置</p>
        </header>
        <div id="map"
             style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
</div>


<script>
    var listJson = [
        {
            sdrPointArr:[
                {
                    pointArr: '{"wa":2048.0651267858493,"point":{"lng":113.337389,"lat":23.126485}}'
                }
            ],
            storePoint:{
                lat: 23.11997,
                lng: 113.34091
            }
        }
    ];


    var vm = new Vue({
        el: '#body',
        data: function () {
            return {
                point: {x: '', y: ''},
                showMap: false,
                rules: {
                    city: {msg: '请选择城市'},
                    street: {msg: '请选择所在地址'},
                    houseNumber: {msg: '请填写详细地址'}
                },
                form: {
                    city: '',
                    street: '',
                    houseNumber: ''
                }
            }
        },
        methods: {
            setCity: function () {
                var addressList = store.getItem('addressList') ? store.getItem('addressList') : [];
                addressList.push({
                    city: this.form.city,
                    detail: this.form.street + this.form.houseNumber,
                    selected: false
                });
                store.setItem('addressList', addressList);
            },
            chooseStreet: function () {
                var _this = this;
                this.showMap = true;
                var usePoint = this.point;                  // 用户当前的坐标

                setTimeout(function () {
                    listJson.forEach(function (item, i) {
                        map(usePoint, item.sdrPointArr, function (rs) {
                            console.log(rs); // 用户点击确定后，将返回用户选择的地址
                            _this.form.city = rs.province + rs.city;
                            _this.form.street = rs.district + rs.street;
                            _this.form.houseNumber = rs.streetNumber;
                            _this.showMap = false;
                        });
                    })
                })
            },
            checkValid: function () {
                var _this = this;
                for (var rule in this.rules) {
                    if (!this.form[rule]) {
                        $.toptip(this.rules[rule].msg, 'warning');
                        return false
                    }
                }
                return true
            },
            submit: function () {
                if (this.checkValid()) {
                    this.setCity();
                    window.history.go(-1);
                }
            },
        },
        created: function () {
        }
    })

    function getBaiduAddress(data) {
        if (data) {
            vm.point = {
                lng: data.content.location.lng,
                lat: data.content.location.lat
            };
            vm.form.city = data.content.address_component.province + data.content.address_component.city;
            vm.form.street = data.content.address_component.district + data.content.address_component.street;
        }
    }


</script>
<script type="text/javascript"
        src="https://api.map.baidu.com/highacciploc/v1?qterm=mb&ak=3tNmobyDXvMyo8xL8GTULduAoxWeAihe&coord=bd09ll&callback_type=jsonp&extensions=3&callback=getBaiduAddress"></script>

<!-- 这行代码必须放在后面 -->
</body>
</html>